import classNames from 'classnames'
import{billTypeToName} from './billListData'
import { useState } from 'react'
import './index.scss'
import dayjs from 'dayjs'
import Icon from '@/component/Icon'
const DailyBill = ({item}) => {
  const currentDay = dayjs(item.date).format('YYYY-MM-DD')
  const pay = item.type === 'pay'?item.money:0
  const income = item.type === 'income'?item.money:0
  const total = pay+income
  const [isShow,setIsShow] =useState(false)
  return (
    <div className={classNames('dailyBill')} onClick={()=>setIsShow(!isShow)}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{currentDay}</span>
          <span className={classNames('arrow',isShow && 'expand')} ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{pay}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{income}</span>
          </div>
          <div className="balance">
            <span className="money">{total}</span>
            <span className="type">结余</span>
          </div>
        </div>
      {/* 单日列表 */}
      {isShow && <div className="billList">
            <div className="bill" key={item.id}>
              <Icon type={item.useFor}/>
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames('money', item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
      </div>}
      </div>
    </div>
  )
}
export default DailyBill